<template>
    <div class="info-model animate__animated animate__fadeIn animate__faster"  @click="colse">
      <div class="content ">
        <div class="header">
          <h2>
            <div class="brand" v-if="detail.is_premium">品牌</div>
            <div>{{detail.name}}</div>
          </h2>
        </div>
        <!-- 评分 -->
        <div class="rating">
          <ul>
            <li>
              <div>{{detail.rating}}分</div>
              <div>评分</div>
            </li>
            <li>
              <div>{{detail.recent_order_num}}</div>
              <div>月售</div>
            </li>
            <li>
              <div>蜂鸟专送</div>
              <div>约{{detail.order_lead_time}}分钟</div>
            </li>
            <li>
              <div>¥{{detail.float_delivery_fee}}元</div>
              <div>配送费</div>
            </li>
            <li>
              <div>{{(detail.distance / 1000).toFixed(2)}}km</div>
              <div>距离</div>
            </li>
          </ul>
        </div>
        <!-- 公告 -->
        <div class="announcement">
          <span>—</span>
          <span>公告</span>
          <span>—</span>
          <div>{{detail.promotion_info}}</div>
        </div>

      </div>
      <div class="close" @click="colse"><i class="iconfont icon-chahao2"></i></div>

    </div>
</template>
<script>
import 'animate.css';
export default {
  props: {
    detail: Object
  },
  name: 'Informodel',
  methods: {
    colse () {
      this.$emit('close', false)
    }
  },
}
</script>
<style  scoped>
.info-model {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.479);
}
.content {
  position: absolute;
  top: 25%;
  height: 5.5rem;
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border-radius: 0.2rem;
}
.close {
  position: absolute;
  top:11.2rem;
  margin-left: 50%;
  transform: translateX(-0.4rem);
  width: 0.8rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
  background-color: rgba(131, 127, 127, 0.124);
  border-radius: 50%;
  border: 0.05rem solid rgb(255, 255, 255);
  color: rgb(255, 255, 255);
}
.brand {
  display: inline-block;
  background-color: #ffe100;
  height: 0.5rem;
  margin-bottom: 0.2rem;
  width: 1.2rem;
  line-height: 0.5rem;
  border-radius: 0.1rem;
  text-align: center;
  font-size: 0.05rem !important;
  font-weight: 550;
  color: rgb(0, 0, 0);
  margin-right: 0.1rem;
}
.header {
  padding: 0.5rem 1rem;
  font-size: 0.5rem;
  font-weight: 1000;
  font-family: "黑体";
}
.header h2 {
  display: flex;
  line-height: 0.6rem;
  font-weight: bold;
}
h2 div:nth-child(2) {
  margin-left: 0.1rem;
}
.rating ul {
  display: flex;
  justify-content: space-around;
}
.rating ul li {
  text-align: center;
}
.rating ul li div:nth-child(1) {
  font-size: 0.2rem;
  color: black;
  font-weight: 550;
}
.rating ul li div:nth-child(2) {
  margin-top: 0.15rem;
  font-size: 0.1rem;
  color: rgb(82, 78, 78);
}
.announcement {
  margin-top: 0.5rem;
  text-align: center;
  color: rgb(150, 144, 144);
  font-size: 0.4rem;
}
.announcement span:nth-child(2) {
  margin: 0.3rem 0.2rem;
}
.announcement div {
  color: black;
  text-align: left;
  margin-top: 0.5rem;
  padding-left: 0.5rem;
  font-size: 0.3rem;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.25s ease-out;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
